<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/md5.js"></script>
    <script  type="text/javascript" src="/layer/layer.js"></script>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<h3 align="center">订单详情</h3>
<hr/>
<br/>
<div class="col-xs-6 col-md-6  col-center-block">
    <table id="list" class="table table-hover" style="text-align: center;">
        <tr>
            <td style="font-weight: bold">订单编号</td>
            <td id="o_id"></td>
        </tr>
        <tr>
            <td style="font-weight: bold">用户ID</td>
            <td id="o_uid"></td>
        </tr>
        <tr>
            <td style="font-weight: bold">商品ID</td>
            <td id="o_gid"></td>
        </tr>
        <tr>
            <td style="font-weight: bold">订单创建时间</td>
            <td id="o_time"></td>
        </tr>
        <tr>
            <td style="font-weight: bold">商品数量</td>
            <td id="o_count"></td>
        </tr>
        <tr>
            <td style="font-weight: bold">订单总价</td>
            <td id="o_price"></td>
        </tr>
        <tr>
            <td style="font-weight: bold">订单状态</td>
            <td id="o_status"></td>
        </tr>
    </table>
    <div style="text-align: center; margin-left: 170px">
        <span class="bg-danger" id="tips">
            <span id="msg">订单将在<span id="time"></span>后自动关闭，请及时支付</span>
        </span>
        <button type="button" class="btn btn-success" id="pay" style="margin-left: 20px;width: 80px; height: 30px">
            支付
        </button>
        <span id="error" class="text-danger"></span>
    </div>
    <br/>
</div>
<br/>
</body>
<script>
    $(function () {
        var href = window.location.href;
        var orderId = href.substring(href.lastIndexOf("=") + 1);

        function routeLogin() {
            window.location.href = "/html/login.html";
        }

        $("#pay").click(function () {
           $.ajax({
              type: "GET",
              url: "/seckill/pay/" + orderId,
               success: function (result) {
                   if(result.code != 10001) {
                       if(result.code == 20005) {
                           routeLogin();
                       } else {
                           layer.msg(result.message);
                       }
                   } else {
                       layer.msg("付款成功");

                   }
               }
           });
        });
        $.ajax({
           type: "GET",
           url: "/order/" + orderId,
           success: function (result) {
               if(result.code != 10001) {
                   if(result.code == 20005) {
                       routeLogin();
                   } else {
                       layer.msg(result.message);
                   }
               } else {
                   var order = result.data;
                   $("#o_id").text(order.orderId);
                   $("#o_gid").text(order.goodsId);
                   $("#o_uid").text(order.userId);
                   $("#o_count").text(order.orderGoodsCount);
                   $("#o_time").text(order.orderCreateTime);
                   $("#o_price").text(order.orderPrice);
                   var status;
                   if(order.orderStatus == 0) {
                       status = "待支付";
                   } else {
                       status = "已支付";
                   }
                   $("#o_status").text(status);
               }
           }
        });
    });
</script>
</html>